<template>
  <div style="height: 400px" :id="id" />
</template>

<script>
export default {
  data() {
    return {
      barCharts: null
    }
  },
  methods: {
    reDrawEcharts() {
      var that = this
      var echartsOption = {
        // echarts选项，所有绘图数据和样式都在这里设置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.label, // x轴数据

          textStyle: {
            fontSize: "100%",
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: "#000",
              fontSize: "100%",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          }, //轴线不显示
        },
        tooltip: {
          //鼠标放到图上的数据展示样式
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: this.title + " <br/>{b} : {c}",
          textStyle: {
            fontSize: "100%", //字体大小
          },
        },
        series: [
          {
            type: "bar",
            data: this.data,
            itemStyle: {
              normal: {
                color: function (params) {
                  return that.color[params.dataIndex]
                },
              },
            },
          },
        ],
      };
      this.barCharts.setOption(echartsOption)
    },
  },
  mounted() {
    var echarts = require("echarts")
    this.$nextTick(() => {
      // 基于准备好的dom，初始化echarts实例
      this.barCharts = echarts.init(document.getElementById(this.id))
      this.reDrawEcharts()
      setTimeout(() => {
        this.barCharts.resize()
      }, 0)
      window.addEventListener("resize", () => {
        this.barCharts.resize()
      })
    })
  },
  watch: {
    data(val) {
      this.data = val;
      this.reDrawEcharts()
    },
    color(val) {
      this.color = val;
      this.reDrawEcharts()
    },
    label(val) {
      this.label = val;
      this.reDrawEcharts()
    },
  },
  props: {
    data: {
      type: Array,
    },
    title: {
      type: String,
    },
    id: {
      type: String,
    },
    label: {
      type: Array,
    },
    color: {
      type: Array,
    }
  }
}
</script>

<style scoped>
</style>
